索引签名：TypeScript 中的动态属性类型定义

            
[keyName: KeyType]: ValueType;

            

              
                Copy
              
            
          

            
interface UserPreferences {
  [key: string]: string | number;
  theme: string;
  fontSize: number;
  notificationsEnabled: string; // Example of a string value
}

const myPreferences: UserPreferences = {
  theme: 'dark',
  fontSize: 16,
  notificationsEnabled: 'daily',
  language: 'en-US' // This is allowed because 'language' is a string key, and 'en-US' is a string value.
};

console.log(myPreferences.theme); // Output: dark
console.log(myPreferences['fontSize']); // Output: 16
console.log(myPreferences.language); // Output: en-US

// This would cause a TypeScript error because 'color' is not defined and its value type is not string | number:
// const invalidPreferences: UserPreferences = {
//   color: true;
// };

            

              
                Copy
              
            
          

            
interface TranslatedMessages {
  [locale: string]: { [key: string]: string };
}

const messages: TranslatedMessages = {
  'en': {
    greeting: 'Hello',
    welcome: 'Welcome to our service',
  },
  'fr': {
    greeting: 'Bonjour',
    welcome: 'Bienvenue à notre service',
  },
  'es-MX': {
    greeting: 'Hola',
    welcome: 'Bienvenido a nuestro servicio',
  }
};

console.log(messages['en'].greeting); // Output: Hello
console.log(messages['fr']['welcome']); // Output: Bienvenue à notre service

// This would cause a TypeScript error because 'fr' does not have a property named 'farewell' defined:
// console.log(messages['fr'].farewell);

// To handle potentially missing translations gracefully, you might use optional properties or add more specific checks.

            

              
                Copy
              
            
          

            
interface NumberCollection {
  [index: number]: number;
  length: number; // Arrays typically have a length property
}

const numbers: NumberCollection = [
  10,
  20,
  30,
  40
];

numbers.length = 4; // This is also allowed by the NumberCollection interface

console.log(numbers[0]); // Output: 10
console.log(numbers[2]); // Output: 30

// This would cause a TypeScript error because the value is not a number:
// numbers[1] = 'twenty';

            

              
                Copy
              
            
          

            
interface RecordMap {
  [id: number]: { name: string, isActive: boolean };
}

const records: RecordMap = {
  101: { name: 'Alpha', isActive: true },
  205: { name: 'Beta', isActive: false },
  310: { name: 'Gamma', isActive: true }
};

console.log(records[101].name); // Output: Alpha
console.log(records[205].isActive); // Output: false

// This would cause a TypeScript error because the property 'description' is not defined within the value type:
// console.log(records[101].description);

            

              
                Copy
              
            
          

            
interface MixedIndex {
  [key: string]: number;
  [index: number]: string; // This will be effectively ignored because the string index signature already covers numeric keys.
}

// If you try to assign values:
const mixedExample: MixedIndex = {
  'a': 1,
  'b': 2
};

// According to the string signature, numeric keys should also have number values.
mixedExample[1] = 3; // This assignment is allowed and '3' is assigned.

// However, if you try to access it as if the number signature was active for value type 'string':
// console.log(mixedExample[1]); // This will output '3', a number, not a string.

// The type of mixedExample[1] is considered 'number' due to the string index signature.

            

              
                Copy
              
            
          

            
interface Config {
  port: number; // Explicit property
  [settingName: string]: any; // Index signature allows any type for other settings
}

const serverConfig: Config = {
  port: 8080,
  timeout: 5000,
  host: 'localhost',
  protocol: 'http'
};

// 'port' is a number, which is fine.
// 'timeout', 'host', 'protocol' are also allowed because the index signature is 'any'.

// If the index signature were more restrictive:
interface StrictConfig {
  port: number;
  [settingName: string]: string | number;
}

const strictServerConfig: StrictConfig = {
  port: 8080,
  timeout: '5s', // Allowed: string
  host: 'localhost' // Allowed: string
};

// This would cause an error:
// const invalidConfig: StrictConfig = {
//   port: 8080,
//   debugMode: true // Error: boolean is not assignable to string | number
// };

            

              
                Copy
              
            
          

            
interface AnyObject {
  [key: string]: any;
}

const data: AnyObject = {
  name: 'Example',
  value: 123,
  isActive: true,
  config: { setting: 'abc' }
};

console.log(data.name.toUpperCase()); // Works, but TypeScript can't guarantee 'name' is a string.
console.log(data.value.toFixed(2)); // Works, but TypeScript can't guarantee 'value' is a number.

            

              
                Copy
              
            
          

            
interface ImmutableSettings {
  readonly [key: string]: string;
}

const settings: ImmutableSettings = {
  theme: 'dark',
  language: 'en',
  currency: 'USD'
};

console.log(settings.theme); // Output: dark

// This would cause a TypeScript error:
// settings.theme = 'light';

// You can still define explicit properties with specific types, and the readonly modifier applies to them as well.
interface ReadonlyUser { 
  readonly id: number;
  readonly [key: string]: string;
}

const user: ReadonlyUser = {
  id: 123,
  username: 'global_dev',
  email: 'dev@example.com'
};

// user.id = 456; // Error
// user.username = 'new_user'; // Error

            

              
                Copy
              
            
          

            
interface DataProcessor {
  [key: string]: string; // All dynamic properties must be strings
  process(): void; // A method
  // This would be an error: `processValue: (value: string) => string;` would need to conform to the index signature type.
}

const processor: DataProcessor = {
  data1: 'value1',
  data2: 'value2',
  process: () => {
    console.log('Processing data...');
  }
};

processor.process();
console.log(processor.data1);

// This would cause an error because 'data3' is not a string:
// processor.data3 = 123;

// If you want methods to be part of the dynamic properties, you'd need to include them in the index signature's value type:
interface DynamicObjectWithMethods {
  [key: string]: string | (() => void);
}

const dynamicObj: DynamicObjectWithMethods = {
  configValue: 'some_setting',
  runTask: () => console.log('Task executed!')
};

dynamicObj.runTask();
console.log(typeof dynamicObj.configValue);

            

              
                Copy
              
            
          

            
interface ProductAttributes {
  [attributeName: string]: string | number | boolean;
}

const clothingAttributes: ProductAttributes = {
  size: 'M',
  color: 'Blue',
  material: 'Cotton',
  isWashable: true
};

const electronicsAttributes: ProductAttributes = {
  voltage: 220,
  powerConsumption: '50W',
  connectivity: 'Wi-Fi, Bluetooth',
  hasWarranty: true
};

function displayAttributes(attributes: ProductAttributes) {
  for (const key in attributes) {
    console.log(`${key}: ${attributes[key]}`);
  }
}

displayAttributes(clothingAttributes);
displayAttributes(electronicsAttributes);

            

              
                Copy
              
            
          

            
interface ExchangeRates {
  [currencyCode: string]: number;
}

interface CurrencyData {
  base: string;
  rates: ExchangeRates;
}

interface LocalizedMessages {
  [locale: string]: { [messageKey: string]: string };
}

const usdData: CurrencyData = {
  base: 'USD',
  rates: {
    EUR: 0.93,
    GBP: 0.79,
    JPY: 157.38
  }
};

const frenchMessages: LocalizedMessages = {
  'fr': {
    welcome: 'Bienvenue',
    goodbye: 'Au revoir'
  }
};

console.log(`1 USD = ${usdData.rates.EUR} EUR`);
console.log(frenchMessages['fr'].welcome);

            

              
                Copy
              
            
          

            
interface CustomContactFields {
  [fieldName: string]: string | number | boolean | null;
}

interface ContactRecord {
  id: number;
  name: string;
  email: string;
  customFields: CustomContactFields;
}

const user1: ContactRecord = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  customFields: {
    leadSource: 'Webinar',
    accountTier: 2,
    isVIP: true,
    lastContacted: null
  }
};

function getCustomField(record: ContactRecord, fieldName: string): string | number | boolean | null {
  return record.customFields[fieldName];
}

console.log(`Lead Source: ${getCustomField(user1, 'leadSource')}`);
console.log(`Account Tier: ${getCustomField(user1, 'accountTier')}`);

            

              
                Copy